<template>
  <div class="water-flow-adjustment-container">
    <h4>水流量调节控制</h4>
    <p class="status-info" v-if="waterFlow < 50">⚠️ 当前水流量偏低，需要调节</p>

    <div class="flow-control-section">
      <div class="flow-display">
        <span class="flow-label">当前水流量:</span>
        <span class="flow-value">{{ waterFlow }}</span>
        <span class="flow-unit">L/min</span>
      </div>

      <div class="slider-container">
        <el-slider
          v-model="waterFlow"
          :min="20"
          :max="80"
          :step="1"
          :show-tooltip="true"
          tooltip-position="top"
          class="water-flow-slider"
        />
        <div class="slider-labels">
          <span>0</span>
          <span class="warning-label">50</span>
          <span>100</span>
        </div>
      </div>

      <div class="info-text">
        <p>💡 提示: 水流量低于50 L/min会触发报警</p>
      </div>
    </div>

    <div class="action-buttons">
      <el-button
        type="primary"
        @click="adjustWaterFlow"
        :loading="isAdjusting"
        size="large"
        class="adjust-button"
        :disabled="isAdjusting"
      >
        调节水流量
      </el-button>
      <el-button
        @click="resetToDefault"
        :disabled="isAdjusting || waterFlow === 50"
        class="reset-button"
      >
        恢复默认值
      </el-button>
    </div>
  </div>
</template>

<script setup>
import { ref, watch } from "vue";
import { ElSlider, ElButton, ElMessage } from "element-plus";
import { setAlgorithmParam } from "@/api/util";
import { useUserStore } from "@/store/user";

// 获取用户store实例
const userStore = useUserStore();

// 定义组件props
const props = defineProps({
  initialFlow: {
    type: Number,
    default: 50,
  },
});

// 定义组件事件
const emit = defineEmits(["flowAdjusted"]);

// 响应式数据
const waterFlow = ref(props.initialFlow);
const isAdjusting = ref(false);

// 监听初始值变化
watch(
  () => props.initialFlow,
  (newVal) => {
    waterFlow.value = newVal;
  }
);

// 调节水流量函数
const adjustWaterFlow = async () => {
  try {
    isAdjusting.value = true;
    // 从user store获取copyNum
    const copyNum = userStore.copyNum;
    // 调用setAlgorithmParam设置水流量参数
    // 假设水流量参数名是"water_flow"，实际参数名可能需要调整
    await setAlgorithmParam("2_41_0_0", waterFlow.value, copyNum);

    // 显示成功提示
    ElMessage.success(`水流量已成功调节至 ${waterFlow.value} L/min`);

    // 触发水流量已调节事件
    emit("flow-updated", waterFlow.value);
  } catch (error) {
    console.error("调节水流量失败:", error);
    ElMessage.error("水流量调节失败，请稍后重试");
  } finally {
    isAdjusting.value = false;
  }
};

// 重置为默认值
const resetToDefault = () => {
  waterFlow.value = 50;
  ElMessage.info("已恢复默认水流量值");
};
</script>

<style scoped>
.water-flow-adjustment-container {
  background: #2c3e50;
  border-radius: 8px;
  padding: 24px;
  color: #ecf0f1;
  min-width: 300px;
}

.water-flow-adjustment-container h4 {
  color: #3498db;
  margin-top: 0;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid #34495e;
  font-size: 18px;
  font-weight: 600;
}

.status-info {
  background-color: #e74c3c;
  color: white;
  padding: 12px;
  border-radius: 6px;
  margin-bottom: 20px;
  font-weight: 500;
  font-size: 14px;
}

.flow-control-section {
  margin-bottom: 24px;
}

.flow-display {
  display: flex;
  align-items: baseline;
  justify-content: center;
  margin-bottom: 20px;
  padding: 16px;
  background-color: #34495e;
  border-radius: 8px;
}

.flow-label {
  font-size: 16px;
  color: #95a5a6;
  margin-right: 8px;
}

.flow-value {
  font-size: 28px;
  font-weight: bold;
  color: #3498db;
  margin-right: 4px;
}

.flow-unit {
  font-size: 14px;
  color: #95a5a6;
}

.slider-container {
  margin-bottom: 16px;
}

.water-flow-slider {
  margin: 16px 0;
}

.slider-labels {
  display: flex;
  justify-content: space-between;
  color: #95a5a6;
  font-size: 12px;
  margin-top: 8px;
}

.warning-label {
  color: #e74c3c;
  font-weight: bold;
}

.info-text {
  background-color: #3498db;
  padding: 12px;
  border-radius: 6px;
  font-size: 14px;
}

.info-text p {
  margin: 0;
}

.action-buttons {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-top: 24px;
}

.adjust-button {
  background: linear-gradient(135deg, #27ae60, #2ecc71);
  border: none;
  padding: 12px 24px;
  font-size: 16px;
  font-weight: 600;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.adjust-button:hover:not(:disabled) {
  background: linear-gradient(135deg, #229954, #27ae60);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(46, 204, 113, 0.4);
}

.adjust-button:active:not(:disabled) {
  transform: translateY(0);
}

.adjust-button:disabled {
  background: #95a5a6;
}

.reset-button {
  background: #7f8c8d;
  border: none;
  padding: 12px 24px;
  font-size: 14px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  color: white;
}

.reset-button:hover:not(:disabled) {
  background: #95a5a6;
}

.reset-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .water-flow-adjustment-container {
    padding: 16px;
  }

  .action-buttons {
    flex-direction: column;
  }

  .adjust-button,
  .reset-button {
    width: 100%;
  }

  .flow-value {
    font-size: 24px;
  }
}
</style>